<template>
  <div class="search">
    <Card>
      <Row>
        <Button @click="handleAdd('一级', 'add')" type="primary">添加类别</Button>
      </Row>
      <Table
        :data="dataList"
        :loading="loading"
        :columns="columns"
        class="mt_10"
        ref="table"
        border
      ></Table>
    </Card>
    <Modal v-model="editFlag" :title="editForm.id ? '修改' : '添加'">
      <Form ref="editForm" :model="editForm" :rules="rules" @submit.native.prevent :label-width="100">
        <FormItem label="类别" v-if="level == '二级'" prop="ptitle" style="width: 100%">
          <Input v-model="editForm.ptitle" disabled />
        </FormItem>
        <FormItem
          :label="level == '二级' ? '关键字名称' : '类别'"
          prop="title"
          style="width: 100%"
        >
          <Input v-model="editForm.title" placeholder="请输入内容" :maxlength="10" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="editFlag = false">取消</Button>
        <Button type="primary" @click="submitForm">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_community from "@/api/community.js";

export default {
  name: "community-list",
  data() {
    return {
      loading: false, // 加载状态
      dataList: [], // 数据列表
      editFlag: false, // 弹窗
      editForm: {}, // 表单
      level: "一级", //等级
      rules: {
        // 规则
        name: [{ required: true, message: "请输入内容" }],
      },
      columns: [
        // 表头
        { title: "序号", width: 100, type: "index" },
        { title: "类别", key: "title", minWidth: 120, tooltip: true },

        {
          title: "名称",
          tooltip: true,
          minWidth: 300,
          render: (h, params) => {
            let func = params.row.child.map((item) => {
              return h("div", { class: { columnItem: true } }, [
                h(
                  "span",
                  {
                    style: { marginRight: "10px" },
                    on: {
                      click: () => {
                        this.handleAdd("二级", "edit", item, params.row);
                      },
                    },
                  },
                  item.title
                ),
                h("Icon", {
                  props: { type: "md-close", size: 14 },
                  on: {
                    click: () => {
                      this.handleDel("二级", item);
                    },
                  },
                }),
              ]);
            });
            return h("div", {}, [
              ...func,
              h(
                "div",
                {
                  class: { columnItem: true },
                  on: {
                    click: () => {
                      this.handleAdd("二级", "add", params.row);
                    },
                  },
                },
                [
                  h("Icon", {
                    props: { type: "md-add", size: 14 },
                  }),
                ]
              ),
            ]);
          },
        },
        {
          title: "操作",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            return h(
              "div",
              {
                style: { display: "flex", justifyContent: "center" },
              },
              [
                h(
                  "Button",
                  {
                    props: { type: "primary", size: "small" },
                    style: { marginRight: "5px" },
                    on: {
                      click: () => {
                        this.handleAdd("一级", "edit", params.row);
                      },
                    },
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: { type: "error", size: "small" },
                    style: { marginRight: "5px" },
                    on: {
                      click: () => {
                        this.handleDel("一级", params.row);
                      },
                    },
                  },
                  "删除"
                ),
              ]
            );
          },
        },
      ],
    };
  },
  watch: {
    editForm(val) {
      if (val) this.$refs.editForm.resetFields();
    },
  },
  methods: {
    // 打开弹窗
    handleAdd(level, action, v, r) {
      this.level = level;
      let form = {};
      if (level == "一级" && action == "add") {
        form = { pid: 0, title: null };
      }
      if (level == "一级" && action == "edit") {
        form = { id: v.id, title: v.title };
      }
      if (level == "二级" && action == "add") {
        form = { pid: v.id, ptitle: v.title, title: null };
      }
      if (level == "二级" && action == "edit") {
        form = { id: v.id, pid: v.pid, ptitle: r.title, title: v.title };
      }
      this.editForm = Object.assign({}, form);
      this.editFlag = true;
    },
    // 提交表单
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          if (this.editForm.id) {
            API_community.keywordEdit(this.editForm).then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.editFlag = false;
                this.getData();
              }
            });
          } else {
            API_community.keywordAdd(this.editForm).then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.editFlag = false;
                this.getData();
              }
            });
          }
        }
      });
    },
    // 删除
    handleDel(level, v) {
      this.$Modal.confirm({
        title: "确认删除",
        content:
          "<p>确认删除" +
          (level == "一级" ? "类别" : "关键字") +
          "【" +
          v.title +
          "】吗？</p>",
        onOk: () => {
          API_community.keywordDel({ id: v.id }).then((res) => {
            if (res.code == 200) {
              this.$Message.success(res.msg);
              this.getData();
            }
          });
        },
      });
    },
    //查询关键字列表
    getData() {
      this.loading = true;
      API_community.keywordList()
        .then((res) => {
          if (res.code == 200) {
            this.dataList = res.data;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>
<style lang="scss">
.columnItem {
  user-select: none;
  display: inline-block;
  padding: 6px 15px;
  border-radius: 2px;
  color: #ff605c;
  border: 1px solid transparent;
  white-space: nowrap;
  background-color: #ffe5e5;
  margin: 10px 10px 10px 0;
  &:hover {
    cursor: pointer;
    border: 1px solid #ff605c;
  }
}
</style>
